<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI People - Card Beam 动效演示</title>
    
    <!-- 现代化字体 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Noto+Sans+SC:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- 高级CSS框架和组件库 -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
    
    <!-- 动画库 -->
    <link href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css" rel="stylesheet">
    
    <!-- 自定义现代化样式 -->
    <link href="css/modern-ui.css" rel="stylesheet">
    
    <style>
        .demo-container {
            min-height: 100vh;
            background: linear-gradient(135deg, 
                rgba(99, 102, 241, 0.1) 0%, 
                rgba(59, 130, 246, 0.05) 25%, 
                rgba(139, 92, 246, 0.1) 50%, 
                rgba(236, 72, 153, 0.05) 75%, 
                rgba(245, 101, 101, 0.1) 100%);
            padding: 2rem 0;
            position: relative;
            overflow: hidden;
        }
        
        .demo-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(236, 72, 153, 0.05) 0%, transparent 50%);
            pointer-events: none;
        }
        
        .demo-title {
            text-align: center;
            margin-bottom: 4rem;
            position: relative;
            z-index: 2;
        }
        
        .demo-title h1 {
            font-size: 4rem;
            font-weight: 900;
            background: linear-gradient(135deg, 
                var(--primary) 0%, 
                var(--secondary) 50%, 
                var(--primary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 1.5rem;
            text-shadow: 0 0 30px rgba(99, 102, 241, 0.3);
        }
        
        .demo-title p {
            font-size: 1.3rem;
            color: var(--text-secondary);
            max-width: 700px;
            margin: 0 auto;
            font-weight: 500;
            line-height: 1.6;
        }
        
        .demo-controls {
            text-align: center;
            margin-bottom: 5rem;
            position: relative;
            z-index: 2;
        }
        
        .demo-btn {
            padding: 1.2rem 2.5rem;
            margin: 0.75rem;
            border: none;
            border-radius: 16px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            font-size: 1.1rem;
            position: relative;
            overflow: hidden;
        }
        
        .demo-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, 
                transparent 0%, 
                rgba(255, 255, 255, 0.2) 50%, 
                transparent 100%);
            transition: left 0.6s ease;
        }
        
        .demo-btn:hover::before {
            left: 100%;
        }
        
        .demo-btn-primary {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            box-shadow: 
                0 10px 25px rgba(99, 102, 241, 0.3),
                0 5px 10px rgba(139, 92, 246, 0.2);
        }
        
        .demo-btn-primary:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 
                0 15px 35px rgba(99, 102, 241, 0.4),
                0 8px 15px rgba(139, 92, 246, 0.3);
        }
        
        .demo-btn-secondary {
            background: rgba(255, 255, 255, 0.1);
            color: var(--text-primary);
            border: 2px solid rgba(99, 102, 241, 0.3);
            backdrop-filter: blur(20px);
        }
        
        .demo-btn-secondary:hover {
            border-color: var(--primary);
            color: var(--primary);
            transform: translateY(-3px) scale(1.05);
            background: rgba(99, 102, 241, 0.1);
        }
        
        .demo-features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2.5rem;
            margin-top: 5rem;
            max-width: 1400px;
            margin-left: auto;
            margin-right: auto;
            position: relative;
            z-index: 2;
        }
        
        .demo-feature {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 20px;
            padding: 2.5rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            text-align: center;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }
        
        .demo-feature::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            transform: scaleX(0);
            transition: transform 0.4s ease;
        }
        
        .demo-feature:hover::before {
            transform: scaleX(1);
        }
        
        .demo-feature:hover {
            transform: translateY(-5px);
            background: rgba(255, 255, 255, 0.08);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }
        
        .demo-feature i {
            font-size: 3.5rem;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 1.5rem;
            display: block;
        }
        
        .demo-feature h3 {
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--text-primary);
            margin-bottom: 1.5rem;
        }
        
        .demo-feature p {
            color: var(--text-secondary);
            line-height: 1.7;
            font-size: 1.1rem;
            font-weight: 500;
        }
        
        .demo-stats {
            position: fixed;
            top: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.9);
            color: white;
            padding: 1.5rem;
            border-radius: 16px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.9rem;
            z-index: 9999;
            min-width: 250px;
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .demo-stats h4 {
            font-size: 1rem;
            margin-bottom: 1rem;
            color: #00ff88;
            font-weight: 700;
        }
        
        .demo-stats .stat-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
            padding: 0.25rem 0;
        }
        
        .demo-stats .stat-value {
            color: #00ff88;
            font-weight: 600;
        }
        
        .demo-info {
            position: fixed;
            bottom: 20px;
            left: 20px;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 1rem;
            border-radius: 12px;
            font-size: 0.8rem;
            z-index: 9999;
            max-width: 300px;
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .demo-info h5 {
            color: #00ff88;
            margin-bottom: 0.5rem;
            font-weight: 700;
        }
        
        .demo-info ul {
            margin: 0;
            padding-left: 1.2rem;
        }
        
        .demo-info li {
            margin-bottom: 0.3rem;
        }
    </style>
</head>
<body class="modern-body">
    <!-- 背景装饰元素 -->
    <div class="modern-bg-decoration"></div>
    
    <!-- 演示统计信息 -->
    <div class="demo-stats" id="demoStats">
        <h4>⚡ Card Beam 统计</h4>
        <div class="stat-item">
            <span>悬停次数:</span>
            <span class="stat-value" id="hoverCount">0</span>
        </div>
        <div class="stat-item">
            <span>点击次数:</span>
            <span class="stat-value" id="clickCount">0</span>
        </div>
        <div class="stat-item">
            <span>刷新次数:</span>
            <span class="stat-value" id="refreshCount">0</span>
        </div>
        <div class="stat-item">
            <span>当前状态:</span>
            <span class="stat-value" id="currentState">静态</span>
        </div>
        <div class="stat-item">
            <span>光束强度:</span>
            <span class="stat-value" id="beamIntensity">正常</span>
        </div>
    </div>
    
    <!-- 操作说明 -->
    <div class="demo-info">
        <h5>🎮 操作指南</h5>
        <ul>
            <li><strong>空格键</strong> - 刷新卡片</li>
            <li><strong>R键</strong> - 重置演示</li>
            <li><strong>A键</strong> - 自动刷新</li>
            <li><strong>B键</strong> - 光束效果</li>
            <li><strong>鼠标悬停</strong> - 光束聚焦</li>
        </ul>
    </div>
    
    <div class="demo-container">
        <div class="container">
            <!-- 标题区域 -->
            <div class="demo-title">
                <h1 class="animate__animated animate__fadeInDown">Card Beam 动效</h1>
                <p class="animate__animated animate__fadeInUp animate__delay-1s">
                    体验未来科技感的卡片束动画：光束聚焦、3D浮动、动态刷新
                </p>
            </div>
            
            <!-- 控制按钮 -->
            <div class="demo-controls animate__animated animate__fadeIn animate__delay-2s">
                <button class="demo-btn demo-btn-primary" onclick="refreshDemoCards()">
                    <i class="bi bi-arrow-clockwise me-2"></i>
                    光束刷新
                </button>
                <button class="demo-btn demo-btn-secondary" onclick="resetDemo()">
                    <i class="bi bi-arrow-counterclockwise me-2"></i>
                    重置演示
                </button>
                <button class="demo-btn demo-btn-secondary" onclick="toggleAutoRefresh()">
                    <i class="bi bi-play-circle me-2"></i>
                    <span id="autoRefreshText">自动刷新</span>
                </button>
                <button class="demo-btn demo-btn-secondary" onclick="toggleBeamEffect()">
                    <i class="bi bi-lightning me-2"></i>
                    <span id="beamEffectText">增强光束</span>
                </button>
            </div>
            
            <!-- Card Beam 展示区域 -->
            <div class="three-card-stack animate__animated animate__zoomIn animate__delay-3s" id="demoCardStack">
                <!-- 卡片将通过JavaScript动态生成 -->
            </div>
            
            <!-- 功能特点展示 -->
            <div class="demo-features">
                <div class="demo-feature animate__animated animate__fadeInLeft animate__delay-4s">
                    <i class="bi bi-lightning-charge"></i>
                    <h3>光束聚焦效果</h3>
                    <p>悬停时卡片周围出现动态光束，营造科技感十足的视觉体验</p>
                </div>
                
                <div class="demo-feature animate__animated animate__fadeInUp animate__delay-5s">
                    <i class="bi bi-layers-half"></i>
                    <h3>3D 浮动动画</h3>
                    <p>卡片采用3D变换技术，呈现自然的浮动和旋转效果</p>
                </div>
                
                <div class="demo-feature animate__animated animate__fadeInRight animate__delay-6s">
                    <i class="bi bi-arrow-repeat"></i>
                    <h3>光束聚合刷新</h3>
                    <p>刷新时卡片先聚合变亮，然后散开显示新内容</p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 演示数据
        const demoCharacters = [
            {
                id: 1,
                name: "阿尔伯特·爱因斯坦",
                category: "物理学家",
                description: "20世纪最伟大的科学家之一，相对论的创立者，诺贝尔物理学奖获得者。他的理论改变了我们对时间、空间和宇宙的理解。",
                tags: ["物理学", "相对论", "诺贝尔奖"]
            },
            {
                id: 2,
                name: "列奥纳多·达·芬奇",
                category: "艺术家",
                description: "文艺复兴时期的天才，集画家、发明家、科学家于一身。《蒙娜丽莎》和《最后的晚餐》的创作者。",
                tags: ["艺术", "发明", "文艺复兴"]
            },
            {
                id: 3,
                name: "玛丽·居里",
                category: "化学家",
                description: "首位获得诺贝尔奖的女性，也是唯一在两个不同科学领域获得诺贝尔奖的人。放射性研究的先驱。",
                tags: ["化学", "物理", "放射性"]
            },
            {
                id: 4,
                name: "威廉·莎士比亚",
                category: "文学家",
                description: "英国文艺复兴时期最伟大的戏剧家和诗人，被誉为'英语文学之父'。创作了《哈姆雷特》等不朽名作。",
                tags: ["文学", "戏剧", "诗歌"]
            },
            {
                id: 5,
                name: "尼古拉·特斯拉",
                category: "发明家",
                description: "塞尔维亚裔美国发明家，交流电之父。他的发明和理论为现代电力系统奠定了基础。",
                tags: ["电力", "发明", "科技"]
            },
            {
                id: 6,
                name: "孔子",
                category: "哲学家",
                description: "中国古代思想家、教育家，儒家学派创始人。他的思想对中华文明产生了深远影响。",
                tags: ["哲学", "教育", "儒家"]
            },
            {
                id: 7,
                name: "弗里达·卡罗",
                category: "画家",
                description: "墨西哥超现实主义画家，以自画像和墨西哥文化元素著称。她的作品充满了激情和个人经历。",
                tags: ["绘画", "超现实主义", "自画像"]
            },
            {
                id: 8,
                name: "史蒂夫·乔布斯",
                category: "企业家",
                description: "苹果公司联合创始人，现代科技产业的先驱。他重新定义了个人电脑、智能手机等产品。",
                tags: ["科技", "创新", "设计"]
            },
            {
                id: 9,
                name: "阿基米德",
                category: "数学家",
                description: "古希腊数学家、物理学家，被誉为'数学之神'。发现了浮力定律和杠杆原理。",
                tags: ["数学", "物理", "几何"]
            }
        ];
        
        // 统计数据
        let stats = {
            hoverCount: 0,
            clickCount: 0,
            refreshCount: 0,
            currentState: '静态',
            beamIntensity: '正常'
        };
        
        let autoRefreshInterval = null;
        let beamEffectEnabled = false;
        let currentCards = [];
        
        // 初始化演示
        function initDemo() {
            generateRandomCards();
            setupEventListeners();
            updateStats();
        }
        
        // 生成随机卡片
        function generateRandomCards() {
            const shuffled = [...demoCharacters].sort(() => 0.5 - Math.random());
            currentCards = shuffled.slice(0, 3);
            renderCards();
        }
        
        // 渲染卡片
        function renderCards() {
            const container = document.getElementById('demoCardStack');
            container.innerHTML = '';
            
            // 添加光束背景
            const beamBg = document.createElement('div');
            beamBg.className = 'card-beam-bg';
            container.appendChild(beamBg);
            
            // 创建卡片束容器
            const cardBeamStack = document.createElement('div');
            cardBeamStack.className = 'card-beam-stack';
            
            currentCards.forEach((character, index) => {
                const card = createDemoCard(character, index);
                cardBeamStack.appendChild(card);
            });
            
            container.appendChild(cardBeamStack);
            setupCardInteractions();
        }
        
        // 创建演示卡片
        function createDemoCard(character, index) {
            const card = document.createElement('div');
            card.className = 'stack-card';
            
            const initials = character.name.substr(0, 2);
            const tags = character.tags || [];
            
            card.innerHTML = `
                <div class="stack-card-content">
                    <div class="stack-card-header">
                        <div class="stack-card-avatar">${initials}</div>
                        <div class="stack-card-info">
                            <h3>${character.name}</h3>
                            <p>${character.category}</p>
                        </div>
                    </div>
                    <div class="stack-card-description">
                        ${character.description}
                    </div>
                    ${tags.length > 0 ? `
                        <div class="stack-card-tags">
                            ${tags.slice(0, 3).map(tag => `<span class="stack-card-tag">${tag}</span>`).join('')}
                        </div>
                    ` : ''}
                </div>
            `;
            
            return card;
        }
        
        // 设置卡片交互
        function setupCardInteractions() {
            const container = document.getElementById('demoCardStack');
            const cards = container.querySelectorAll('.stack-card');
            const beamBg = container.querySelector('.card-beam-bg');
            
            cards.forEach((card, index) => {
                // 悬停效果
                card.addEventListener('mouseenter', () => {
                    stats.hoverCount++;
                    stats.currentState = '悬停中';
                    updateStats();
                    
                    // 增强光束效果
                    if (beamBg) {
                        beamBg.style.opacity = '1';
                        beamBg.style.transform = 'translate(-50%, -50%) rotate(5deg) scaleX(1.5)';
                    }
                    
                    // 添加光束聚焦效果
                    card.style.filter = 'brightness(1.1) saturate(1.2)';
                });
                
                card.addEventListener('mouseleave', () => {
                    stats.currentState = '静态';
                    updateStats();
                    
                    // 恢复光束效果
                    if (beamBg) {
                        beamBg.style.opacity = '0.8';
                        beamBg.style.transform = 'translate(-50%, -50%) rotate(0deg) scaleX(1)';
                    }
                    
                    // 恢复卡片效果
                    card.style.filter = 'brightness(1) saturate(1)';
                });
                
                // 点击效果
                card.addEventListener('click', () => {
                    stats.clickCount++;
                    stats.currentState = '点击中';
                    updateStats();
                    
                    // 创建光束爆发效果
                    createBeamBurst(card);
                    
                    setTimeout(() => {
                        stats.currentState = '静态';
                        updateStats();
                    }, 500);
                });
            });
        }
        
        // 创建光束爆发效果
        function createBeamBurst(card) {
            const burst = document.createElement('div');
            burst.style.cssText = `
                position: absolute;
                top: 50%;
                left: 50%;
                width: 2px;
                height: 2px;
                background: linear-gradient(45deg, var(--primary), var(--secondary));
                border-radius: 50%;
                transform: translate(-50%, -50%);
                pointer-events: none;
                z-index: 1000;
                animation: beamBurst 0.6s ease-out forwards;
            `;
            
            // 添加爆发动画样式
            if (!document.querySelector('#beam-burst-style')) {
                const style = document.createElement('style');
                style.id = 'beam-burst-style';
                style.textContent = `
                    @keyframes beamBurst {
                        0% {
                            width: 2px;
                            height: 2px;
                            opacity: 1;
                            transform: translate(-50%, -50%) scale(1);
                        }
                        50% {
                            width: 200px;
                            height: 200px;
                            opacity: 0.8;
                            transform: translate(-50%, -50%) scale(1);
                        }
                        100% {
                            width: 400px;
                            height: 400px;
                            opacity: 0;
                            transform: translate(-50%, -50%) scale(1);
                        }
                    }
                `;
                document.head.appendChild(style);
            }
            
            card.appendChild(burst);
            
            // 动画完成后移除元素
            setTimeout(() => {
                if (burst.parentNode) {
                    burst.parentNode.removeChild(burst);
                }
            }, 600);
        }
        
        // 刷新演示卡片
        function refreshDemoCards() {
            const container = document.getElementById('demoCardStack');
            if (!container) return;
            
            stats.refreshCount++;
            stats.currentState = '刷新中';
            updateStats();
            
            // 添加聚合动画类
            container.classList.add('refreshing');
            
            // 等待聚合动画完成后更新内容
            setTimeout(() => {
                generateRandomCards();
                
                // 移除聚合动画类，添加散开动画类
                container.classList.remove('refreshing');
                container.classList.add('refreshing-scatter');
                
                // 散开动画完成后清理类名
                setTimeout(() => {
                    container.classList.remove('refreshing-scatter');
                    stats.currentState = '静态';
                    updateStats();
                }, 1000);
            }, 500);
        }
        
        // 重置演示
        function resetDemo() {
            stats.hoverCount = 0;
            stats.clickCount = 0;
            stats.refreshCount = 0;
            stats.currentState = '静态';
            stats.beamIntensity = '正常';
            
            if (autoRefreshInterval) {
                clearInterval(autoRefreshInterval);
                autoRefreshInterval = null;
                document.getElementById('autoRefreshText').textContent = '自动刷新';
            }
            
            if (beamEffectEnabled) {
                beamEffectEnabled = false;
                document.getElementById('beamEffectText').textContent = '增强光束';
                disableBeamEffect();
            }
            
            generateRandomCards();
            updateStats();
        }
        
        // 切换自动刷新
        function toggleAutoRefresh() {
            if (autoRefreshInterval) {
                clearInterval(autoRefreshInterval);
                autoRefreshInterval = null;
                document.getElementById('autoRefreshText').textContent = '自动刷新';
            } else {
                autoRefreshInterval = setInterval(refreshDemoCards, 4000);
                document.getElementById('autoRefreshText').textContent = '停止自动刷新';
            }
        }
        
        // 切换光束效果
        function toggleBeamEffect() {
            beamEffectEnabled = !beamEffectEnabled;
            
            if (beamEffectEnabled) {
                enableBeamEffect();
                document.getElementById('beamEffectText').textContent = '关闭光束';
                stats.beamIntensity = '增强';
            } else {
                disableBeamEffect();
                document.getElementById('beamEffectText').textContent = '增强光束';
                stats.beamIntensity = '正常';
            }
            
            updateStats();
        }
        
        // 启用光束效果
        function enableBeamEffect() {
            const container = document.getElementById('demoCardStack');
            if (container) {
                container.style.setProperty('--beam-intensity', '2');
                container.classList.add('enhanced-beam');
            }
        }
        
        // 禁用光束效果
        function disableBeamEffect() {
            const container = document.getElementById('demoCardStack');
            if (container) {
                container.style.setProperty('--beam-intensity', '1');
                container.classList.remove('enhanced-beam');
            }
        }
        
        // 更新统计信息
        function updateStats() {
            document.getElementById('hoverCount').textContent = stats.hoverCount;
            document.getElementById('clickCount').textContent = stats.clickCount;
            document.getElementById('refreshCount').textContent = stats.refreshCount;
            document.getElementById('currentState').textContent = stats.currentState;
            document.getElementById('beamIntensity').textContent = stats.beamIntensity;
        }
        
        // 设置事件监听器
        function setupEventListeners() {
            // 键盘快捷键
            document.addEventListener('keydown', (e) => {
                if (e.key === ' ') {
                    e.preventDefault();
                    refreshDemoCards();
                } else if (e.key === 'r' || e.key === 'R') {
                    resetDemo();
                } else if (e.key === 'a' || e.key === 'A') {
                    toggleAutoRefresh();
                } else if (e.key === 'b' || e.key === 'B') {
                    toggleBeamEffect();
                }
            });
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', initDemo);
    </script>
</body>
</html>
